<template>
  <div class="view-header">
    <template v-if="fileInfo">
      <div class="file-name">
        {{ fileInfo.originalFileName }}.{{ fileInfo.fileExt }}
      </div>
      <div class="file-desc">
        <span class="desc-item">{{ fileInfo.fileSize | formatFileSize }}</span>
        <span class="desc-item">{{ fileInfo.gmtCreated | formatDate('yyyy-MM-dd hh:mm') }}</span>
        <span class="desc-item">由<span class="uploader">{{ fileInfo.realName }}</span>上传</span>
      </div>
      <div class="option-container">
        <span :underline="false" @click="download">下载</span>
        <span :underline="false" @click="close">关闭</span>
      </div>
    </template>
    <div v-else class="file-name">
      文件资源不存在！
    </div>
  </div>
</template>
<script>
export default {
  props: {
    fileId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileInfo: {}
    }
  },
  watch: {
    fileId: function(val) {
      this.fetchFile()
    }
  },
  created() {
    this.fetchFile()
  },
  methods: {
    fetchFile() {
      this.fileInfo = {}
      if (this.fileId) {
        this.$store.dispatch('fileResourcesGetByUUID', this.fileId).then((res) => {
          if (res) {
            this.fileInfo = res
            document.title = `${res.originalFileName}`
          } else {
            this.msgWarning('文件资源不存在，即将自动关闭窗口')
            setTimeout(() => {
              window.opener = null
              window.open('', '_self')
              window.close()
            }, 2000)
          }
        })
      }
    },
    settingInfo(data) {
      this.fileInfo = data
      document.title = `${data.originalFileName}`
    },
    close() {
      this.$confirm('确定要关闭当前窗口吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.opener = null
        window.open('', '_self')
        window.close()
      }).catch(() => {

      })
    },
    download() {
      this.$store.dispatch('downLoadFile', this.fileInfo.fileUuid).then(response => {
        this.T.downloadFile(response, this.fileInfo.originalFileName + '.' + this.fileInfo.fileExt)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-header{
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    background: #4b4b4b;
    box-shadow: 0px -1px 1px 0px rgba(255,255,255,0.05) inset, 0px 1px 1px 0px rgba(0,0,0,0.20);
    padding: 0 30px;
    color: #fff;
    font-size: 16px;
    .file-name{
        font-size: 16px;
    }
    .file-desc{
        font-size: 14px;
        .uploader{
            color: #449FF3;
            padding: 0 3px;
        }
        .desc-item{
            margin-left: 14px;
        }
    }
    .option-container{
        flex: 1;
        text-align: right;
        span{
            margin-left: 10px;
            cursor: pointer;
            font-size: 14px;
        }
    }
}
</style>
